import { CheckBoxSvg, CheckedBoxSvg } from "@/app/assets/CustomizeSvg";
import { MCPItemType } from "@/service/general/enumType";
import { McpItem } from "@/service/request/modal/dataModal";
import { useEffect, useState } from "react";

const PlayBookMcp = ({data, setProcessParam, callback}: {data: McpItem[], setProcessParam: (param: string) => void, callback?: (param: any) => void}) => {
    const [mcpProcessParams, setMcpProcessParams] = useState<McpItem[]>([]);

    const [isLoad, setIsLoad] = useState<boolean>(true);
    useEffect(() => {
        if (isLoad) {
            setIsLoad(false);
            loadData();
        }
        
    });

    const loadData = () => {
        setMcpProcessParams([...data])
    }

    const onChangeArray = (name: string, value: string) => {
        setMcpProcessParams((mcpParams) => {
            const newArray = [...mcpParams.map((mItem) => {
                if (mItem.name === name) {
                    const newItem = {
                        ...mItem,
                        value: value
                    }
                    return newItem;
                }
                return mItem;
            })];
            const jsonStr = JSON.stringify(newArray);
            setProcessParam(jsonStr);
            return [...newArray];
        })
    }

    const isGetLastData = (value: string) => {
        return value === "true";
    }

    const isPassword = (type: boolean) => {
        return type ? 'password':'text';
    }

    return (<>
    {
        mcpProcessParams?.length > 0 ? mcpProcessParams.map((mItem, index) => (<>
            <div key={`mcp_item_${mItem.name}_${index}`} className="w-full h-11 flex flex-row items-center justify-start gap-2">
                {
                mItem.type === MCPItemType.TEXT && (<>
                    <div className="h-full text-center flex flex-row items-center justify-center">{mItem.desc}</div>
                    <div className="flex-1 h-11 flex flex-row items-center justify-center rounded-lg border p-2 has-[input:focus-within]:border-blue-500/60">
                    <input 
                    value={mItem.value} 
                    className="w-full h-full border-none outline-none"
                    onChange={(e) => {onChangeArray(mItem.name, e.target.value)}} type={isPassword(mItem.password)} />
                    </div>
                </>)
                }
                {
                mItem.type === MCPItemType.CHECKBOX && (<>
                    <div className={`w-4 flex flex-row items-center justify-center ${isGetLastData(mItem.value) ? "text-blue-600": ""}`} onClick={() => {onChangeArray(mItem.name, String(!isGetLastData(mItem.value)))}}>{isGetLastData(mItem.value) ? (<><CheckedBoxSvg width={`100%`} height={`100%`} /></>):(<><CheckBoxSvg width={`100%`} height={`100%`}/></>)}</div>
                    <div onClick={() => {onChangeArray(mItem.name, String(!isGetLastData(mItem.value)))}}>{mItem.desc}</div>
                </>)
                }
            </div>
        </>)):(<></>)
    }
    </>);
};

export {
    PlayBookMcp
}